<template>
  <div class="menu_wrap">
    <!-- 登录 -->
    <div class="user_box not_login_box" v-if="!isLogin">
      <i class="iconfont icon-user"></i>
      <span class="text">登录</span>
    </div>

    <div class="user_box login_box" v-else>
      <img class="login_avatar_img" :src="`${imgUrlPrefix}avatar.svg`" alt="" />
    </div>

    <!-- 分类 -->
    <div class="category_box">
      <div
        :class="{
          category_item_box: true,
          is_selected: contentStore.currentCategory == c.categoryId,
        }"
        v-for="c in contentStore.categorys"
        :key="c.categoryId"
        @click="contentStore.setSelectedCategory(c.categoryId)"
      >
        <i :class="`iconfont icon-${c.categoryIcon}`"></i>
        <span class="title">{{ c.categoryTitle }}</span>
      </div>
    </div>

    <!-- 设置 -->
    <div class="setting_box">
      <i class="iconfont icon-setting"></i>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";
import "./index.scss";
export default defineComponent({
  name: "Menu",
});
</script>
<script setup>
import { imgUrlPrefix } from "@/libs/baseUrl.js";
import { useContentStore } from "@/store";

const contentStore = useContentStore();

// 是否登录标识
const isLogin = ref(true);

onMounted(() => {
  contentStore.getModulesFunc();
});
</script>

<style lang="scss" scoped></style>
